﻿@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<table class="data">
    <thead>
        <tr>
            <td>Press button</td><td>Result</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><button id="btnSendJSON">Send Json</button></td><td id="result">Nothing yet!</td>
        </tr>
    </tbody>
</table>

@section scripts{

    @*THIS is important to include: <script type="javascript" src="json2.js"></script>*@
    <script type="text/javascript">
        
        $("#btnSendJSON").click(function() {
            var person =    {   Id          :   1,
                                FirstName   :   "Kalle",
                                LastName    :   "Anka",
                                Addresses   :   [  {Line1      :   "Andvägen 5",        //Address 1
	                                                Line2      :   "",
                                                    ZipCode    :   "0987654321",
                                                    City       :   "Ankeborg",
                                                    State      :   "",
                                                    Country    :   "USA 1"}
                                                    ,
	                                                {Line1      :   "Gåsavägen 5",      //Address 
	                                                Line2      :   "",
                                                    ZipCode    :   "1234567890",
                                                    City       :   "Gåseborg",
                                                    State      :   "",
                                                    Country    :   "USA 2"}
                                                ]

                            };
            
            var JSONperson = JSON.stringify(person);
            
            $.ajax({
                type: "POST",
                url: "@Url.Action("Save")",
                dataType: 'json',
                data: JSONperson,
                contentType: 'application/json; charset=utf-8',
                success: function(jsonDataResult) {
                    
                    $("#result").append('<h3>Name:</h3>');
                    $("#result").append('<p>FirstName: '+ jsonDataResult.FirstName +'</p>');
                    $("#result").append('<p>LastName: '+ jsonDataResult.LastName +'</p>');
                    
                    $("#result").append('<h3>Addresses:</h3>');
                    // this is where we can loop through the results in the json object
                    $.each(jsonDataResult.Addresses,function(i){
                        $("#result").append('<p>City: '+ jsonDataResult.Addresses[i].City +'</p>');
                        $("#result").append('<p>Line1: '+ jsonDataResult.Addresses[i].Line1 +'</p>');
                        $("#result").append('<p>Line2: '+ jsonDataResult.Addresses[i].Line2 +'</p>');
                        $("#result").append('<p>ZipCode: '+ jsonDataResult.Addresses[i].ZipCode +'</p>');
                        $("#result").append('<p>State: '+ jsonDataResult.Addresses[i].State +'</p>');
                        $("#result").append('<p>Country: '+ jsonDataResult.Addresses[i].Country +'</p>');
                    });
                },
                error: function(errorMsg) {
                    alert('Uncaught Error.\n' + errorMsg.responseText);
                }
            });
        });
    </script>
    }